<template>
  <div>
    <el-dialog title="软件服务列表" width="70%" :visible.sync="dialogVisible" :before-close="closeDialog">
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        v-show="showSearch"
        label-width="100px"
      >
        <!--<el-form-item label="车辆配置" prop="vehicleConfig">-->
          <!--<el-input-->
            <!--v-model="queryParams.vehicleConfig"-->
            <!--placeholder="请输入车辆配置"-->
            <!--clearable-->
            <!--size="medium"-->
            <!--maxlength="200"-->
            <!--style="width: 240px"-->
            <!--@keyup.enter.native="handleQuery"-->
          <!--/>-->
        <!--</el-form-item>-->
        <el-form-item label="服务类型" prop="type">
          <el-select
            v-model="queryParams.type"
            placeholder="服务类型"
            @change="changeType"
            style="width: 240px"
          >
            <el-option
              v-for="item in typeList"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="服务名称" prop="serviceName">
          <el-select
            v-model="queryParams.serviceCode"
            placeholder="服务名称"
            style="width: 240px"
            clearable
          >
            <el-option
              v-for="(item,index) in serviceNameList"
              :key="index"
              :label="item.serviceName"
              :value="item.serviceCode"
            />
          </el-select>
          <!--<el-input-->
            <!--v-model="queryParams.serviceCode"-->
            <!--placeholder="请输入服务名称"-->
            <!--clearable-->
            <!--size="medium"-->
            <!--maxlength="200"-->
            <!--style="width: 240px"-->
            <!--@keyup.enter.native="handleQuery"-->
          <!--/>-->
        </el-form-item>
        <el-form-item label="车型代码" prop="modelCode">
          <el-input
            v-model="queryParams.modelCode"
            placeholder="请输入车型代码"
            clearable
            size="medium"
            maxlength="200"
            style="width: 240px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <!--<el-form-item label="服务分类" prop="category">-->
            <!--<el-select-->
              <!--v-model="queryParams.category"-->
              <!--placeholder="服务分类"-->
              <!--clearable-->
              <!--size="medium"-->
              <!--maxlength="200"-->
              <!--style="width: 240px"-->
            <!--&gt;-->
            <!--<el-option-->
              <!--v-for="item in categoryList"-->
              <!--:key="item.value"-->
              <!--:label="item.name"-->
              <!--:value="item.value"-->
             <!--/>-->
            <!--</el-select>-->
        <!--</el-form-item>-->
        <!--<el-form-item label="服务归属域" prop="domain">-->
            <!--<el-select-->
              <!--v-model="queryParams.domain"-->
              <!--placeholder="服务归属域"-->
              <!--clearable-->
              <!--size="medium"-->
              <!--maxlength="200"-->
              <!--style="width: 240px"-->
            <!--&gt;-->
            <!--<el-option-->
              <!--v-for="item in domainList"-->
              <!--:key="item.value"-->
              <!--:label="item.name"-->
              <!--:value="item.value"-->
             <!--/>-->
            <!--</el-select>-->
        <!--</el-form-item>-->
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table
        v-loading="loading"
        :data="serviceList"
        height="65vh"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center"/>
        <el-table-column label="服务类型" align="center" prop="serviceType">
          <!--<template slot-scope="scope">-->
            <!--{{ scope.row.serviceType?serivcetypeDict[scope.row.serviceType]:scope.row.serviceType }}-->
          <!--</template>-->
        </el-table-column>
        <!--<el-table-column label="服务归属域" align="center" prop="domainName"/>-->
        <!--<el-table-column label="服务分类" align="center" prop="category">-->
          <!--<template slot-scope="scope">-->
            <!--{{ scope.row.serviceType=='智能驾驶'?scope.row.categoryName:scope.row.category }}-->
          <!--</template>-->
        <!--</el-table-column>-->
        <el-table-column label="服务名称" align="center" prop="serviceName"/>
        <el-table-column label="服务代码" align="center" prop="serviceCode"/>
        <!--<el-table-column label="车辆配置" align="center" prop="vehicleConfig"/>-->
        <!--<el-table-column label="车系名称" align="center" prop="modelName"/>-->
        <el-table-column label="车型代码" align="center" prop="modelCode"/>
        <el-table-column label="服务描述" align="center" prop="description"/>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageIndex"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
        :autoScroll = "false"
      />

      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="confirmSelect([])">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { serviceList, serviceField } from "@/api/shop/service";
import { verifyService } from "@/api/shop/goods";
import { getDicts as getDicts } from '@/api/system/dict/data'

export default {
  name: "service-multiple-selector-comp",
  components: {},
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    //用于处理重新请求
    isReRequery: {
      type: Number,
      default: 0
    },
    servicesList: {
      type: Array,
      default: ()=>[]
    }
  },
  computed: {},
  watch: {
    dialogVisible(val) {
      this.getList();
    },
    isReRequery(newV){
      if(this.servicesList && this.servicesList.length >= 0){
        this.selectedItem = this.servicesList
        this.confirmSelect(this.servicesList)
      }
    }
  },
  data() {
    return {
      loading: true,
      serviceList: [],
      total: 0,
      // 查询参数
      queryParams: {
        pageIndex: 1,
        pageSize: 10,
        modelCode: undefined,
        vehicleConfig: undefined,
        serviceCode: '',
        domain: undefined,
        category: undefined,
        type: '1'
      },
      // 显示搜索条件
      showSearch: true,
      selectedItem: "",
      domainList: [],
      categoryList: [],
      typeList: [],
      serviceNameList: [],
      serivcetypeDict: {}
    };
  },
  created() {
    this.init();
  },
  mounted() {
    this.changeType(this.queryParams.type)
  },
  methods: {
    changeType(e){
      this.queryParams.pageIndex = 1
      this.queryParams.pageSize = 10
      let params = {
        type: e,
        pageIndex: this.queryParams.pageIndex,
        pageSize: this.queryParams.pageSize,
        forGetServiceName: true
      }
      serviceList(params).then(res => {
        this.serviceNameList = res.rows
      });
    },
    init: function() {
      this.getDomaninList();
      this.getCategoryList();
      this.getTypeList();
    },
    /**
     * 弹窗控制
     */
    closeDialog() {
      this.$emit("update:dialogVisible", false);
    },
    // 查询SOTA服务列表
    getList() {
      this.loading = true;
      serviceList(this.queryParams).then(response => {
        this.serviceList = [];
        response.rows.forEach((item)=>{
          // item.serviceType = this.queryParams.type;
          this.serviceList.push(item);
        });
        this.total = response.total;
        this.loading = false;
      });
    },
     /**
     * 获取服务归属域
     */
    getDomaninList() {
      return new Promise((resolve) => {
        serviceField({serviceField: 'service_sale_belong_flag'}).then((res) => {
          if (res.data) {
            this.domainList = res.data;
            // 默认选择第一个
            //this.queryParams.domain = this.domainList[0].value;
          }
          resolve(true);
        });
      });
    },
     /**
     * 获取服务分类
     */
    getCategoryList() {
      return new Promise((resolve) => {
        serviceField({serviceField: 'service_sale_cate_flag'}).then((res) => {
          if (res.data) {
            this.categoryList = res.data;
            // 默认选择第一个
            //this.queryParams.domain = this.domainList[0].value;
          }
          resolve(true);
        });
      });
    },
    /**
     * 获取服务类型
     * 查询字典类型详细
     */
    getTypeList() {
      getDicts('service_type_dict').then(response => {
        this.typeList = [];
        response.data.forEach((item)=>{
          let newInfo = {};
          newInfo['name'] = item.dictLabel;
          newInfo['value'] = item.dictValue;
          this.typeList.push(newInfo);

          this.serivcetypeDict[item.dictValue] = item.dictLabel;
        })
      })
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.selectedItem = selection;
    },
    /**
     *
     * 确认选择
     */
    confirmSelect(serviceList = []) {
      if(serviceList.length == 0){
        let serviceCodes=new Set();
        let modelCodes=new Set();
        let vehicleConfigs=new Set();
        this.selectedItem.forEach(element => {
          serviceCodes.add(element.serviceCode);
          modelCodes.add(element.modelCode);
          vehicleConfigs.add(element.vehicleConfig);
        });
        if(serviceCodes.size > 1){
          if(modelCodes.size > 1){
            this.$message({
              type: "error",
              message: "车型选择有误，不同服务组合，车型和车辆款型必须一致!"
            });
            return;
          }
          if(vehicleConfigs.size >1){
            this.$message({
              type: "error",
              message: "服务选择有误，不同服务组合，车型和车辆款型必须一致!"
            });
            return;
          }
        }
        serviceList = this.selectedItem.map(e=>{
          return {
            serviceType: e.serviceType,
            serviceName: e.serviceName,
            serviceCode: e.serviceCode,
            modelCode: e.modelCode,
            description: e.description,
          }
        })
      }
      if (!serviceList || serviceList.length == 0) {
        return
      }
      let {value} = this.typeList.find(e=>{
        if (e.name == serviceList[0].serviceType) {
          return e
        }
      })
      if (value == 1) {
        verifyService(serviceList).then(res=>{
          if(res.data.canCreate){
            this.$emit("confirm", {selectedItem:this.selectedItem,modelCodes: res.data.modelCodes});
            this.closeDialog();
          }
        })
      }else {
        this.$emit("confirm", {selectedItem:this.selectedItem,modelCodes: []});
        this.closeDialog();
      }
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.changeType(this.queryParams.type)
      this.queryParams.serviceCode = ''
      this.handleQuery();
    }
  }
};
</script>
<style lang="scss" scoped>
</style>
